import React, { useState, useRef } from "react";
import "./index.css";
import { PlusOutlined } from "@ant-design/icons";
import { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from "antd";
import {CaretDownOutlined} from '@ant-design/icons';
const { Option } = Select;
const triangleIcon = <CaretDownOutlined  style={{pointerEvents: 'none'}}/>
const App = () => {
  const [open, setOpen] = useState(false);
  const formRef = useRef(null); // 表单实例引用
  const [isLoading, setIsLoading] = useState(false);
  const [pickerOpen, setPickerOpen] = useState(false);

  const showDrawer = () => {
    setOpen(true);
  };

  const onClose = () => {
    setOpen(false);
    formRef.current?.resetFields(); // 关闭时重置表单
    console.log(isLoading);
    
  };

  const onFinish = (values) => {
    console.log("表单提交数据:", values);
    setOpen(false); // 提交后关闭 Drawer
  };
  const handleSubmit = () => {
    setIsLoading(true);
    formRef.current
      ?.validateFields() // 触发表单验证
      .then((values) => {
        onFinish(values); // 验证通过后提交数据
      })
      .catch((error) => {
        console.log("表单验证错误:", error);
      })
      .finally(() => setIsLoading(false));
  };

  return (
    <div className="container">
      {/* 关联表单引用 */}
      <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
        New account
      </Button>
      <Drawer
        title="Create a new account"
        width={720}
        onClose={onClose}
        open={open}
        styles={{
          body: {
            paddingBottom: 80,
          },
        }}
        maskClosable={false}
        extra={
          <div className="drawer-footer">
            <Space>
              <Button onClick={onClose}>Cancel</Button>
              <Button type="primary" onClick={handleSubmit}>
                {/* 绑定提交处理函数 */}
                Submit
              </Button>
            </Space>
          </div>
        }
        footer={
          <div className="drawer-footer">
            <Space>
              <Button onClick={onClose}>Cancel</Button>
              <Button type="primary" onClick={handleSubmit}>
                {/* 绑定提交处理函数 */}
                Submit
              </Button>
            </Space>
          </div>
        }
      >
        {/* requiredMark  必填项的*号 */}
        <Form layout="vertical" requiredMark={true} ref={formRef}>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="name"
                label="Name"
                rules={[{ required: true, message: 'Please enter user name' }]}
              >
                <Input placeholder="Please enter user name" />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="url"
                label="Url"
                rules={[{ required: true, message: 'Please enter url' }]}
              >
                <Input
                  style={{ width: '100%' }}
                  addonBefore="http://"
                  addonAfter=".com"
                  placeholder="Please enter url"
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="owner"
                label="Owner"
                rules={[{ required: true, message: 'Please select an owner' }]}
              >
                <Select placeholder="Please select an owner" suffixIcon={triangleIcon}>
                  <Option value="xiao">Xiaoxiao Fu</Option>
                  <Option value="mao">Maomao Zhou</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="type"
                label="Type"
                rules={[{ required: true, message: 'Please choose the type' }]}
              >
                <Select placeholder="Please choose the type">
                  <Option value="private">Private</Option>
                  <Option value="public">Public</Option>
                </Select>
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={12}>
              <Form.Item
                name="approver"
                label="Approver"
                rules={[{ required: true, message: 'Please choose the approver' }]}
              >
                <Select placeholder="Please choose the approver">
                  <Option value="jack">Jack Ma</Option>
                  <Option value="tom">Tom Liu</Option>
                </Select>
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="dateTime"
                label="DateTime"
                rules={[{ required: true, message: 'Please choose the dateTime' }]}
              >
                <DatePicker.RangePicker
                  open={pickerOpen}
                  style={{ width: '100%' }}
                  getPopupContainer={trigger => trigger.parentElement}
                  onClick={() => setPickerOpen(!pickerOpen)}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={16}>
            <Col span={24}>
              <Form.Item
                name="description"
                label="Description"
                rules={[
                  {
                    required: true,
                    message: 'please enter url description',
                  },
                ]}
              >
                <Input.TextArea rows={4} placeholder="please enter url description" />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Drawer>
    </div>
  );
};

export default App;
